<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<style>
  #deviceForm label {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
  .device-box,.indicator-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .device-box>div,.indicator-box>div {
    width: 50%;
  }
  .indicator-box {
    padding-top: 16px;
  }
  .middle-box {
    padding: 16px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
  }
  .middle-label {
    margin-bottom: 0px !important;
    display: flex;
    align-items: center;
  }
  .middle-label>span {
    display: inline-block;
    margin-left: 30px;
  }
  .hidden {
    display: none !important;
  }
  .pbi-0 {
    padding-bottom: 0 !important;
  }
</style>
<form id="deviceForm">
  <input type="hidden" name="indicatorId" th:value="${indicator?.indicatorId}">
  <div class="device-box">
    <div class="form-group row">
      <label for="deviceName" class="col-sm-2 col-form-label">设备名称</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.deviceName}"
               name="deviceName" class="form-control" id="deviceName"disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="gatewayIp" class="col-sm-2 col-form-label">ip地址</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.gatewayIp}"
               name="deviceName" class="form-control" id="gatewayIp"disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="serialNumber" class="col-sm-2 col-form-label">串口</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.serialNumber}" name="serialNumber" class="form-control"
               id="serialNumber"disabled>
      </div>
    </div>
  </div>

  <div class="indicator-box">
    <div class="form-group row">
      <label for="indicatorName" class="col-sm-2 col-form-label">指标名称</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.indicatorName}" name="indicatorName" class="form-control"
               id="indicatorName" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="frequency" class="col-sm-2 col-form-label">采集频率</label>
      <div class="col-sm-10">
        <select class="form-control" id="frequency" disabled>
          <option value="">不支持采集频率</option>
          <option th:selected="${indicator?.frequency eq 0}" th:value="0">不采集</option>
          <option th:selected="${indicator?.frequency eq 1}" th:value="1">1分钟</option>
          <option th:selected="${indicator?.frequency eq 2}" th:value="2">10分钟</option>
          <option th:selected="${indicator?.frequency eq 3}" th:value="3">30分钟</option>
          <option th:selected="${indicator?.frequency eq 4}" th:value="4">60分钟</option>
          <option th:selected="${indicator?.frequency eq 5}" th:value="5">12小时</option>
          <option th:selected="${indicator?.frequency eq 6}" th:value="6">半秒钟</option>
        </select>
      </div>
    </div>
    <div class="form-group row">
      <label for="command" class="col-sm-2 col-form-label">采集命令</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.command}" name="command" class="form-control"
               id="command"
               placeholder="不支持采集命令" disabled>
        <div class="invalid-feedback">请填写命令</div>
      </div>
    </div>
    <div class="form-group row">
      <label for="startBit" class="col-sm-2 col-form-label">开始位</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.startBit}" name="startBit" class="form-control"
               id="startBit"
               placeholder="不支持开始位" disabled>
        <div class="invalid-feedback">请填写开始位</div>
      </div>
    </div>
    <div class="form-group row">
      <label for="takeBit" class="col-sm-2 col-form-label">取位</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.takeBit}" name="takeBit" class="form-control"
               id="takeBit"
               placeholder="不支持取位" disabled>
        <div class="invalid-feedback">请填写取位</div>
      </div>
    </div>
    <div class="form-group row">
      <label for="reverse" class="col-sm-2 col-form-label">是否反转</label>
      <div class="col-sm-10">
        <select class="form-control" id="reverse" disabled>
          <option value="">不支持反转</option>
          <option th:selected="${indicator?.reverse eq 0}" th:value="0">不反转</option>
          <option th:selected="${indicator?.reverse eq 1}" th:value="1">反转</option>
        </select>
      </div>
    </div>
    <div class="form-group row">
      <label for="authCode" class="col-sm-2 col-form-label">校验协议</label>
      <div class="col-sm-10">
        <select class="form-control" id="authCode" disabled>
          <option value="">不支持校验协议</option>
          <option th:selected="${indicator?.authCode eq 'CRC' || indicator?.authCode eq 'crc'}" th:value="CRC">CRC</option>
          <option th:selected="${indicator?.authCode eq 'CS' || indicator?.authCode eq 'cs'}" th:value="CS">CS</option>
          <option th:selected="${indicator?.authCode eq 'none'}" th:value="none">无</option>
        </select>
      </div>
    </div>
    <div class="form-group row">
      <label for="readScale" class="col-sm-2 col-form-label">读取进制</label>
      <div class="col-sm-10">
        <select class="form-control" id="readScale" disabled>
          <option value="">不支持读取进制</option>
          <option th:selected="${indicator?.readScale eq 16}" th:value="16">十六进制</option>
          <option th:selected="${indicator?.readScale eq 10}" th:value="10">十进制</option>
        </select>
      </div>
    </div>
    <div class="form-group row">
      <label for="parseScale" class="col-sm-2 col-form-label">解析进制</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.parseScaleStr}" name="multiple" class="form-control"
               id="parseScale" placeholder="不支持解析进制" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="floatable" class="col-sm-2 col-form-label">浮点数</label>
      <div class="col-sm-10">
        <select class="form-control" id="floatable" disabled>
          <option value="">不支持解析浮点数</option>
          <option th:selected="${indicator?.floatable eq 0}" th:value="0">解析为整数</option>
          <option th:selected="${indicator?.floatable eq 1}" th:value="1">解析为浮点数</option>
        </select>
      </div>
    </div>
    <div class="form-group row">
      <label for="multiple" class="col-sm-2 col-form-label">倍数</label>
      <div class="col-sm-10">
        <input type="text" th:value="${indicator?.multiple}" name="multiple" class="form-control"
               id="multiple" placeholder="不支持倍数" disabled>
      </div>
    </div>
  </div>

</form>